<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>考试中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/res/css/global.css}">
</head>
<body>

<div th:replace="/common/header::header-div"></div>
<div class="layui-container">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md8 layui-col-md-offset2" style="margin-top: 20px">

            <div class="fly-panel" style="margin-bottom: 0;">

                <div class="fly-panel-title fly-filter">
                    <a href="javascript:;" onclick="show(this)" class="show layui-this">单元测试</a>
                    <span class="fly-mid"></span>
                    <a href="javascript:;" onclick="show(this)" class="show">我的成绩</a>
                    <span class="fly-mid"></span>
                </div>

                <ul class="fly-list word">
                </ul>

                <ul class="fly-list read" style="display: none">
                </ul>

                <div id="readButton" style="text-align: center;display: none">
                    <div class="laypage-main">
                        <a href="javascript:;" onclick="getPaper()" class="laypage-next">更多</a>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div th:replace="/common/translate::translate-div"></div>

<script th:src="@{/res/layui/layui.js}"></script>
<script>
    layui.use(['form', 'jquery', 'layer'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;

        let num = 0; // 默认阅读数量

        $("#talk").removeClass("layui-this");
        $("#learn").removeClass("layui-this");
        $("#exam").addClass("layui-this");

        window.translation = function (that) {
            let word = $(that).parent().prev().children().val() ;
            if(word == "" ) return;
            $.ajax({
                url:'/learn/word/one/' + word,
                dataType:"json",
                type:'get',
                success:function(data){
                    if(data.success){
                        let english = data.data.english;
                        let chinese = data.data.chinese;
                        $("#english").html(english);
                        $("#chinese").html(chinese);
                        layer.open({
                            type: 1,
                            title: '单词信息',
                            content: $('#tr')//这里content是一个普通的String
                        });
                    }else{
                        layer.msg("单词不存在")
                        return;
                    }
                }
            });
        };

        window.show = function (that) {
            $(".show").removeClass("layui-this");
            $(that).addClass("layui-this");
            $(".fly-list").hide();
            if($(that).html() == "单元测试"){
                $(".word").show();
                $("#readButton").show();
                getPaper();
            }
            if($(that).html() == "我的成绩"){
                $(".read").show();
                $("#readButton").hide();
                // getRead();
            }
        };

        layer.ready(function(){
            $("#readButton").show();
            let content = "";
            $.ajax({
                url:'/exam/paper/' + 5,
                dataType:"json",
                type:'get',
                success:function(data){
                    if(data.success){
                        data.data.forEach(function (paper) {
                            content += "<li>" +
                                "                        <h2 style='margin-left: -50px'>" +
                                "                            <a class=\"layui-badge\">"+ '真题例句' +"</a>" +
                                "                            <a href=\"#\">"+ paper.title +"</a>" +
                                "                        </h2>" +
                                "                        <div class=\"fly-list-info\" style='margin-left: -50px'>" +
                                "                            <span class=\"layui-badge fly-badge-accept layui-hide-xs\">"+ "共" + paper.score + "分" +"</span>" +
                                "                        </div>" +
                                "                        <div class=\"fly-list-badge\">" +
                                "                            <button type=\"button\" onclick='read("+ paper.id +")' class=\"layui-btn\">开始学习</button>" +
                                "                        </div>" +
                                "       </li>"
                        })
                        $(".word").html(content);
                    }
                }
            });
        });

        window.getPaper = function () {
            num += 5;
            let content = "";
            $.ajax({
                url:'/exam/paper/' + num,
                dataType:"json",
                type:'get',
                success:function(data){
                    if(data.success){
                        data.data.forEach(function (paper) {
                            content += "<li>" +
                                "                        <h2 style='margin-left: -50px'>" +
                                "                            <a class=\"layui-badge\">"+ '真题例句' +"</a>" +
                                "                            <a href=\"#\">"+ paper.title +"</a>" +
                                "                        </h2>" +
                                "                        <div class=\"fly-list-info\" style='margin-left: -50px'>" +
                                "                            <span class=\"layui-badge fly-badge-accept layui-hide-xs\">"+ "共" + paper.score + "分" +"</span>" +
                                "                        </div>" +
                                "                        <div class=\"fly-list-badge\">" +
                                "                            <button type=\"button\" onclick='read("+ paper.id +")' class=\"layui-btn\">开始学习</button>" +
                                "                        </div>" +
                                "       </li>"
                        })
                        $(".word").html(content);
                    }
                }
            });
        };

        window.read = function (id) {
            window.location.href = "/exam/paper/one/" + id;
        }
    });
</script>

</body>
</html>